<!--  -->
<template>
  <div ref="ranking" class="ranking" />
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {
    test() {
      return this.$store.state.home.salesFigures
    }
  },
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true,
      handler: function() {
        this.rankinFn()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.rankinFn()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    rankinFn() {
      const rankingOption = {
        title: [
          {
            left: 'center',
            text: '销售额趋势图'
          },
          {
            left: '60',
            text: '单位/元',
            textStyle: {
              lineHeight: '45',
              color: '#999',
              fontSize: '12px'
            }
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.$store.state.home.salesFigures.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.$store.state.home.salesFigures.series,
            type: 'line',
            color: 'rgb(250,78,51)',
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(250,78,51,0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(250,78,51,0)'
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      }
      // 传递一个dom元素
      const psgTimeCharts = echarts.init(this.$refs.ranking)
      // 传入一个配置项
      // psgTimeCharts.setOption(rankingOption)
      rankingOption && psgTimeCharts.setOption(rankingOption, true)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.ranking{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 278px;
    width: 50%;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0 10px;
    margin: 0px;
    border-width: 0px;
    text-align: center;
}
</style>
